<template>
	<view class='main-container' v-if="isShow">
		<view class='img'>
			<image :src="getRealPath(good.goodsImgUrl)" @tap="prevImg()"></image>
		</view>
		<view class='price'>
			<text style='font-size:29upx;margin-left:40upx;'>一口价</text> ￥{{good.goodsPrice}}</view>
		<view class='title'>
			<view class='name'>{{good.goodsName}}</view>
			<view class='next'>
				<text>{{formatTime(good.createTime)}}</text>
				<text>举报</text>
			</view>
		</view>
		<view class="info"  @tap="go_userinfo()">
			<view class="left">
				<image :src="getRealPath(good.imgUrl)" mode=""></image>
				<text>{{good.nickName}}</text>
			</view>
			<uni-icon type="arrowright" size="24" color="#999999" style="margin-right: 30upx;"></uni-icon>
		</view>

		<view class='desc'>
			<text class="tip">详细介绍</text>
			<text class="de">{{good.goodsDesc}}</text>
		</view>

		<view class="btn" v-if="user.id != good.userId">
			<view class="le">
				<image src="../../static/images/share.png" mode=""></image>
				<text>分享</text>
			</view>
			<view class="ri">
				<view style="border: 1px solid #fbaa58;color:#fbaa58;height: 78upx;" @tap="addCollect">
					{{content}}
				</view>
				<view style="background: linear-gradient(to left, #fa4dbe 0, #fbaa58 100%);color: #ffffff;" @tap="contact()">
					立即联系
				</view>
			</view>
		</view>
		
		<view class="btn" v-if="user.id == good.userId">
			<view class="le">
				<image src="../../static/images/share.png" mode=""></image>
				<text>分享</text>
			</view>
			<view class="ri">
				<view style="border: 1px solid #fbaa58;color:#fbaa58;height: 78upx;" @tap="setFlag()">
					设为卖出
				</view>
				<view style="background: linear-gradient(to left, #fa4dbe 0, #fbaa58 100%);color: #ffffff;" @tap="del()">
					删除商品
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js"
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				good: {},
				phone:'',
				content:"",
				isShow:false
			}
		},
		methods: {
			...mapMutations(['setGoodsChange']),
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return (da.getMonth() + 1) + "-" + da.getDate();
			},
			setFlag(){
				let that = this;
				uni.showModal({
					title: '通知提醒',
					content: '是否已卖出此商品',
					showCancel: true,
					cancelText: '手滑了',
					confirmText: '设为卖出',
					success: res => {
						if(res.confirm) {
							utils.post("market/setflag",{
								userId:that.user.id,
								goodsId:that.good.id
							},function(data) {
								utils.successToast("设置为卖出成功");
								that.setGoodsChange({
									goodsGoodsChange:true
								});
								uni.navigateBack({
									delta: 1
								});
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			del(){
				let that = this;
				uni.showModal({
					title: '通知提醒',
					content: '是否删除该商品',
					showCancel: true,
					cancelText: '手滑了',
					confirmText: '删除',
					success: res => {
						if(res.confirm) {
							utils.post("market/delete",{
								userId:that.user.id,
								goodsId:that.good.id
							},function(data) {
								that.setGoodsChange({
									goodsGoodsChange:true
								});
								utils.successToast("删除成功");
								uni.navigateBack({
									delta: 1
								});
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			addCollect(){
				let that = this;
				if(this.content == "加入收藏"){
					uni.showModal({
						title: '通知提醒',
						content: '是否加入收藏',
						showCancel: true,
						cancelText: '再想想',
						confirmText: '加入收藏',
						success: res => {
							if(res.confirm) {
								utils.post("market/addcar",{
									userId:that.user.id,
									goodsId:that.good.id
								},function(data) {
									utils.successToast("加入成功");
									that.content = "取消收藏"
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}else{
					uni.showModal({
						title: '通知提醒',
						content: '是否取消收藏',
						showCancel: true,
						cancelText: '取消',
						confirmText: '移除收藏',
						success: res => {
							if(res.confirm) {
								utils.post("market/removecar",{
									userId:that.user.id,
									goodsId:that.good.id
								},function(data) {
									utils.successToast("移除收藏夹成功");
									that.content = "加入收藏"
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
				
			},
			contact(){
				let that = this;
				if(this.phone.length==0) {
					utils.post("market/getphone",{
						userId:this.good.userId
					},function(data) {
						that.phone = data;
						uni.makePhoneCall({
							phoneNumber:data
						})
					})
				}else{
					uni.makePhoneCall({
						phoneNumber:this.phone
					})
				}
			},
			go_userinfo() {
				uni.navigateTo({
					url: '../usercenter/userinfo?userId='+this.good.userId
				});
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			prevImg() {
				uni.previewImage({
					urls: [this.getRealPath(this.good.goodsImgUrl)]
				})
			}
		},
		computed: {
			...mapState(['user'])
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			uni.setNavigationBarColor({
				frontColor:"#000000",
				backgroundColor:"#ffffff"
			});
			// #endif
			this.good = JSON.parse(option.good);
			if(this.good.flag !=0) {
				uni.showModal({
					title: '通知提醒',
					content: '该商品已已被卖出或者删除',
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {
						uni.navigateBack({
							delta: 1
						});
					},
					fail: () => {},
					complete: () => {}
				});
			}else{
				let that = this;
				utils.post("market/judge",{
					userId:that.user.id,
					goodsId:that.good.id
				},function(data) {
					if(data) {
						that.content = '取消收藏';
					}else{
						that.content = "加入收藏";
					}
				})
			}
			this.isShow = true;
		}
	}
</script>

<style>
	page {
		font-family: Arial, Helvetica, 'Microsoft YaHei';
		background-color: #f6f6f6;
	}

	.main-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.main-container .img {
		width: 750upx;
		height: 590upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.btn {
		width: 100%;
		box-shadow: inset 0px 1px 1px -1px #c8c7cc;
		height: 110upx;
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		background-color: #ffffff;
		z-index: 999;
		align-items: center;

	}

	.le {
		height: 100upx;
		width: 80upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 50upx;
	}

	.le image {
		width: 40upx;
		height: 40upx;
	}

	.le text {
		font-size: 24upx;
		margin-top: 6upx;
	}

	.ri {
		width: 420upx;
		height: 110upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		margin-right: 20upx;
	}

	.ri view {
		width: 49%;
		height: 80upx;
		font-size: 26upx;
		line-height: 80upx;
		text-align: center;
	}

	.main-container .img image {
		width: 570upx;
		height: 570upx;
	}

	.info {
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		margin-top: 20upx;

	}

	.left {
		flex: 1;
		font-size: 24upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left image {
		width: 70upx;
		height: 70upx;
		margin-left: 30upx;
		border-radius: 70upx;
	}

	.left text {
		margin-left: 20upx;
	}

	.price {
		height: 100upx;
		background-color: #ff8247;
		font-size: 40upx;
		color: white;
		width: 100%;
		line-height: 100upx;
	}

	.title {
		width: 100%;
		height: 150upx;
		background-color: white;
	}

	.title .name {
		height: 90upx;
		line-height: 90upx;
		font-size: 30upx;
		font-weight: 600;
		margin-left: 30upx;
	}

	.title .next {
		padding: 0 30upx;
		height: 60upx;
		display: flex;
		font-size: 24upx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #666;
	}

	.desc {
		font-size: 26upx;
		margin-bottom: 140upx;
		margin-top: 20upx;
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;

	}

	.tip {
		font-size: 30upx;
		margin-left: 30upx;
		width: 96%;
		margin-top: 20upx;

	}

	.de {
		font-size: 26upx;
		margin-left: 30upx;
		margin-right: 30upx;
		margin-top: 30upx;
		margin-bottom: 30upx;
		color: #666;
	}
</style>
